<template>
  <div class="table-page">
    <a-form label-align="right" auto-label-width :model="form" class="form">
      <a-row :gutter="16" wrap>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-form-item field="mobile" label="用户手机号">
            <a-input v-model="form.mobile" placeholder="请输入手机号码" />
          </a-form-item>
        </a-col>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-form-item field="nickname" label="用户昵称">
            <a-input v-model="form.nickname" placeholder="请输入姓名" />
          </a-form-item>
        </a-col>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-form-item field="repeat" label="交稿类型">
            <a-select :style="{ width: '320px' }" v-model="form.repeat" placeholder="请选择类型" allow-clear>
              <a-option value="1">重复任务</a-option>
              <a-option value="2">单次任务</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xs="12" :md="12" :lg="8" :xl="6" :xxl="6">
          <a-form-item field="status" label="状态">
            <a-select :style="{ width: '320px' }" v-model="form.status" placeholder="请选择类型" allow-clear>
              <a-option value="1">进行中</a-option>
              <a-option value="2">已结束</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="getTableData">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="handleReset">
              <template #default>重置</template>
            </a-button>
            <a-button style="margin-left: 8px" @click="handleCreate()">
              <template #icon>
                <icon-plus />
              </template>
              <template #default>创建需求</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <section class="table-box">
      <a-table
        row-key="id"
        size="small"
        page-position="bl"
        :bordered="{ cell: true }"
        :loading="loading"
        :data="tableData"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="{ showPageSize: true, showTotal: true, total: total, current: current, pageSize: pageSize }"
        @page-change="changeCurrent"
        @page-size-change="changePageSize"
      >
        <template #columns>
          <a-table-column fixed="left" title="ID" data-index="id" :width="60"></a-table-column>
          <a-table-column fixed="left" title="用户昵称" data-index="nickname" :width="120">
            <template #cell="{ record }">
              <span>{{ record.Customer.nickname }}</span>
            </template></a-table-column
          >
          <a-table-column title="头像" :width="80">
            <template #cell="{ record }">
              <a-avatar>
                <img
                  v-if="record.Customer.headimage && record.Customer.headimage !== ' '"
                  :src="record.Customer.headimage"
                />
                <img v-else alt="avatar" src="@/assets/images/img／defaultAvatar@2x.png" />
              </a-avatar>
            </template>
          </a-table-column>
          <a-table-column title="手机号" data-index="mobile" :width="120">
            <template #cell="{ record }">
              <span>{{ record.Customer.mobile?.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}</span>
            </template>
          </a-table-column>

          <a-table-column title="交稿类型" :width="140" data-index="repeat">
            <template #cell="{ record }">
              <span v-if="record.repeat == 1">重复任务</span>
              <span v-else>单次任务</span>
            </template>
          </a-table-column>
          <a-table-column title="交稿时间" :width="180" data-index="time"></a-table-column>
          <a-table-column title="状态" :width="120" data-index="status">
            <template #cell="{ record }">
              <a-tag v-if="record.status == 1" color="red">进行中</a-tag>
              <a-tag v-if="record.status == 2" color="green">已完成</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="已收稿" :width="80" data-index="delivery_num"></a-table-column>
          <a-table-column title="需求有效期" :width="220" data-index="expiryDate"></a-table-column>

          <a-table-column title="单次任务价格" :min-width="120" data-index="price"> </a-table-column>
          <a-table-column title="账户余额" :min-width="120" data-index="balance">
            <template #cell="{ record }">
              <span>{{ record.Customer.balance }}</span>
            </template>
          </a-table-column>
          <a-table-column fixed="right" title="操作" :width="200" align="center">
            <template #cell="{ record }">
              <a-space :size="4">
                <a-link status="warning" @click="handleCreate(record.id)">
                  <template #default>编辑</template>
                </a-link>
                <a-link @click="handleOpenCreate(record)">
                  <template #default>创作中心</template>
                </a-link>
                <a-popconfirm @ok="handleDelete(record)" type="warning" content="确定删除吗?">
                  <a-link status="danger">
                    <template #default>删除</template>
                  </a-link>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </section>
  </div>
</template>

<script setup lang="ts" name="MainTable">
import { reactive, ref } from 'vue'
import { usePagination } from '@/hooks'
import { getDemandList, deleteDemandList } from '@/apis'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { format } from 'date-fns'

const router = useRouter()
const form = reactive({
  mobile: '',
  nickname: '',
  status: '',
  repeat: ''
})
const typeMap = {
  1: '账户充值',
  2: '后台充值',
  3: '任务扣费',
  4: '后台扣除',
  5: '任务退回'
}
const loading = ref(false)
const tableData = ref([])

const { current, pageSize, total, changeCurrent, changePageSize, setTotal } = usePagination(() => getTableData())

const getTableData = async () => {
  loading.value = true
  const where = {
    page: current.value,
    num: pageSize.value,
    ...form
  }
  const type_map = {
    1: '日交',
    2: '周交'
  }
  const res = await getDemandList(where)
  let resData = JSON.parse(res)

  if (resData.code === 200) {
    tableData.value = resData.result.data.map((dd) => {
      let start_time = dd.start_time === '9999999999' ? '长期' : format(dd.start_time * 1000, 'yyyy-MM-dd')
      let end_time = dd.end_time === '9999999999' ? '长期' : format(dd.end_time * 1000, 'yyyy-MM-dd')
      let time = ''
      if (dd.repeat == 2) {
        time = end_time
      }
      if (dd.repeat == 1) {
        time = type_map[dd.type]
      }
      return {
        ...dd,
        expiryDate: start_time + ' ~ ' + end_time,
        time
      }
    })
    setTotal(resData.result.total)
    loading.value = false
  } else {
    loading.value = false
  }
}
const handleReset = () => {
  form.mobile = ''
  form.nickname = ''
  form.repeat = ''
  form.status = ''
  getTableData()
}
const handleDelete = (record) => {
  deleteDemandList({
    demand_id: record.id
  }).then((res) => {
    const resData = JSON.parse(res)
    if (resData.code === 200) {
      Message.success('删除成功')
      getTableData()
    } else {
      Message.error('删除失败')
    }
  })
}
const handleCreate = (id) => {
  if (id) {
    router.push({
      path: '/demand-list/crateOrEdit',
      query: { id }
    })
  } else {
    router.push({
      path: '/demand-list/crateOrEdit'
    })
  }
}
const handleOpenCreate = (record) => {
  router.push({ path: '/demand-list/createCenter', query: { id: record.id } })
}
getTableData()
</script>

<style lang="scss" scoped>
:deep(.arco-grid) {
  flex-wrap: wrap;
}
:deep(.arco-grid-item) {
  min-width: 250px;
}
:deep(.arco-alert-success) {
  padding: 14px 16px;
  border-color: rgb(var(--success-6));
  background-color: rgba(var(--success-6), 0.08);
  .arco-alert-content {
    color: rgb(var(--success-6));
    font-size: 12px;
  }
}
.table-page {
  height: 100%;
  overflow: hidden;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    margin-top: 12px;
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
  .table-box {
    flex: 1;
    overflow: hidden;
    margin-top: 12px;
    padding-bottom: 16px;
  }
}
</style>
